<template>
  <div>
    <div class="register-container">
      <a-form :form="registerForm" @submit="registerSubmit">
        <a-form-item>
          <a-input
            v-decorator="[
              'username',
              { rules: [{ required: true, message: '请输入用户名' }] }
            ]"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码' }] }
            ]"
            placeholder="请输入密码"
            type="password"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'nickname',
              { rules: [{ required: true, message: '请输入昵称' }] }
            ]"
            placeholder="请输入昵称"
          />
        </a-form-item>
        <!-- <a-form-item>
          <a-input
            v-decorator="[
              'userEmail',
              { rules: [{ required: true, message: '请输入邮箱' }] }
            ]"
            placeholder="请输入邮箱"
          />
        </a-form-item> -->
        <!-- <a-form-item>
          <a-radio-group v-decorator="['sex']">
            <a-radio value="1">
              男
            </a-radio>
            <a-radio value="2">
              女
            </a-radio>
          </a-radio-group>
        </a-form-item> -->
        <a-form-item>
          <a-button type="primary" html-type="submit" block>注册</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import userApi from '@/api/user'
import md5 from 'js-md5'
export default {
  data() {
    return {
      registerForm: this.$form.createForm(this)
    }
  },
  inject: ['reload'],
  methods: {
    registerSubmit(e) {
      e.preventDefault()
      // eslint-disable-next-line handle-callback-err
      this.registerForm.validateFields((err, values) => {
        console.log(err, values)
        values.password = md5(values.password)
        userApi.register(values).then(resp => {
          this.$message.success(resp.msg)
          this.reload()
        })
      })
    }
  }
}
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 15px !important;
}
.ant-form-item-control {
  line-height: none !important;
}
</style>
